<!-- 分院业务员更多 -->
<template>
  <div class="more">
    <mt-header fixed title="业务员列表" style="background:#ffa200; color:#fff">
      <router-link slot="left" to>
        <mt-button icon="back" v-if="iosShow" @click="$router.go(-1)">返回</mt-button>
      </router-link>
    </mt-header>
    <div class="curr_back">
      <img src="../../../static/image/currentduan.png" />
    </div>
    <div class="home_tab">
      <div class="tab_name">
        <span>{{ Name }}</span>
        <select
          name="public-choice"
          v-model="couponSelected"
          @change="getCouponSelected"
        >
          <option
            :value="coupon.id"
            v-for="(coupon, couponList) in couponList"
            :key="couponList"
            >{{ coupon.name }}</option
          >
        </select>
      </div>
      <div class="intxt">
        <form action="javascript:return true;">
          <input
            type="search"
            placeholder="搜索用户名"
            v-model="nickName"
            @keyup.13="show()"
            ref="input1"
          />
        </form>
        <img class="txt" src="../../../static/image/CombinedShape.png" />
      </div>
    </div>

    <div class="ranking">
      <div
        v-infinite-scroll="getCardList"
        infinite-scroll-disabled="moreLoading"
        infinite-scroll-distance="0"
        infinite-scroll-immediate-check="false"
      >
        <div
          class="ran_oitem"
          v-for="(item, index) in list"
          :key="index"
          @click="listdetails(item.openId)"
        >
          <span
            style="margin-left:0.32rem;width:3.58rem;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;"
            >{{ item.nickName }}</span
          >
          <span style="margin-right:0.53rem;color:#666666;"
            >开单：{{ item.directPromotionQuantity }}</span
          >
        </div>
      </div>
    </div>
    <div class="ranking" v-show="nothing" style="margin-bottom:2rem;">
      <img src="../../../static/image/nothing.png" alt />
      <div class="ranking_zi">没有更多数据</div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { Salesmanlist } from "../../api/api";
import querystring from "query-string";
import { Header, InfiniteScroll, Toast } from "mint-ui";

export default {
  name: "More",
  data() {
    return {
      couponList: [
        {
          id: "1",
          name: "直接推广订单数"
        },
        {
          id: "2",
          name: "直接推广订单总额"
        },
        {
          id: "3",
          name: "间接推广订单数"
        },
        {
          id: "4",
          name: "间接推广订单金额"
        },
        {
          id: "5",
          name: "累计收益"
        }
      ],
      couponSelected: "1",
      Name: "",
      branchId: "",
      nickName: "",
      list: [],
      pageNo: 1,
      queryLoading: true,
      moreLoading: false,
      allLoaded: false,
      nothing: false,
       iosShow:false
    };
  },
  created() {
    this.couponSelected = this.couponList[0].id;
    this.Name = this.$route.query.branchName;
    this.branchId = this.$route.query.branchId;
    this.Phonetype();
  },
  methods: {
     //判断是安卓还是ios
        Phonetype(){
           let ua = navigator.userAgent;
           console.log(ua)
        //Android终端
            //let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1;  
           // console.log(isAndroid)
        　   //Ios终端
            let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 
            if(!isiOS){
              this.iosShow = true;
            }
        },
    //业务员更多列表
    Salesmanlist() {
      var params = {
        pageNo: 1,
        branchId: this.branchId,
        pageSize: 20
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      Salesmanlist(params, a).then(res => {
        // console.log(res)
        if (res.data.code == 1) {
          this.list = res.data.data;
          if (this.list.length == 0) {
            this.nothing = true;
          } else {
            this.nothing = false;
          }
          // console.log(this.list)
        } else {
          Toast(res.data.message);
        }
      });
    },
    //默认选中获取
    getCouponSelected() {
      var params = {
        pageNo: 1,
        branchId: this.branchId,
        pageSize: 20,
        orderType: this.couponSelected
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      Salesmanlist(params, a).then(res => {
        // console.log(res.data);
        if (res.data.code == 1) {
          this.list = res.data.data;
          if (this.list.length == 0) {
            this.nothing = true;
          } else {
            this.nothing = false;
          }
        } else {
          Toast(res.data.message);
        }
      });
    },
    //点击跳转业务员详情
    listdetails(item) {
      // this.$router.push({
      //   name: "Genbranchdetail",
      //   params: {
      //     openId: item,
      //     branchId: this.$route.params.branchId,
      //     branchName: this.Name
      //   }
      // });
      this.$router.push({
        path: "/Generalhospital/branchdetail",
        query: { openId: item }
      });
    },
    //搜索
    show() {
      this.$refs.input1.blur();
      var params = {
        pageNo: 1,
        branchId: this.branchId,
        pageSize: 20,
        nickName: this.nickName
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      Salesmanlist(params, a).then(res => {
        if (res.data.code == 1) {
          this.list = res.data.data;
          if (this.list.length == 0) {
            this.nothing = true;
          } else {
            this.nothing = false;
          }
        } else {
          Toast(res.data.message);
        }
      });
    },
    //头部返回
    clickRouter() {
      this.$router.push({
        name: "Genbranchdeta",
        params: { branchName: this.Name, branchId: this.branchId }
      });
    },
    //上拉加载
    getCardList() {
      if (this.allLoaded) {
        console.log(this.allLoaded);
        this.moreLoading = true;
        return;
      }
      if (!this.queryLoading) {
        return;
      }
      this.moreLoading = true;
      var params = {
        pageNo: this.pageNo,
        branchId: this.branchId,
        pageSize: 10
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      Salesmanlist(params, a).then(res => {
        console.log(res.data);
        if (res.data.code == 1) {
          if (res.data.data.length > 0) {
            this.pageNo += res.data.data.length;
            res.data.data.forEach(element => {
              this.list.push(element);
            });
            this.moreLoading = false;
          } else {
            this.allLoaded = true;
            this.moreLoading = true;
            // Toast("没有更多数据");
          }
        } else {
          Toast(res.data.message);
        }
      });
    }
  },
  mounted() {
    this.Salesmanlist();
  }
};
</script>
<style lang="scss" scoped>
.more {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
}

.curr_back {
  width: 100%;
  height: 1.7rem;
  position: relative;
}
.curr_back img {
  width: 100%;
  height: 100%;
}
.select_box {
  background: #fff;
  width: 1.96rem;
  margin-left: 0.25rem;
  position: relative;
  height: 0.72rem;
  background: #dfe2ee;
}
.select {
  box-sizing: border-box;
  width: 100%;
  height: 0.7rem;
  display: flex;
  align-items: center;
  padding: 0 0.2rem;
}
.select_text {
  flex: 1;
  width: 1.24rem;
  font-size: 0.26rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select_img {
  width: 0.26rem;
  height: 0.14rem;
  display: block;
  transition: transform 0.3s;
}
.select_img_rotate {
  transform: rotate(180deg);
}

.home_tab {
  width: 100%;
  height: 1.4rem;
  display: flex;
  align-items: center;
  background: #fff;
  box-sizing: border-box;
  padding: 0.29rem;
}
.home_tab .tab_name {
  font-size: 0.25rem;
  display: flex;
  margin-right: 0.17rem;
  color: #212c67;
  span{
    line-height: 0.7rem;
    // margin-right: 0.1rem;
  }
}
.tab_name select {
  width: 2.3rem;
  height: 0.72rem;
  font-size: 0.26rem;
  color: #333333;
  border: none;
  background: #dfe2ee;
  outline: none;
  margin-left: 0.08rem;
}
.tab_name select option {
  font-size: 0.26rem;
  color: #333333;
  background: #ffffff;
  outline: none;
}
.home_tab input {
  width: 3.1rem;
  height: 0.72rem;
  font-size: 0.26rem;
  box-sizing: border-box;
  padding: 0.2rem;
  color: #333333;
  background: #dfe2ee;
  border: none;
  outline: none;
  display: block;
}
.txt {
  width: 0.26rem;
  height: 0.26rem;
  position: absolute;
  right: 0.2rem;
  top: 0.26rem;
}
.intxt {
  position: relative;
}

.hom_back {
  width: 100%;
  height: auto;
  margin-top: 0.3rem;
}

.ranking {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding-top: 0.3rem;
  // margin-bottom: 0.5rem;
   margin-bottom: 1.5rem;
  img {
    margin: auto;
    width: 3.06rem;
    height: 2rem;
    margin-top:   1.8rem;
  }
}
.ranking_zi {
  text-align: center;
  margin-top: 0.1rem;
  font-size: 0.28rem;
}
.ran_oitem {
  width: 6.84rem;
  margin: auto;
  border: 0.02rem solid #cfcfcf;
  height: 1.1rem;
  line-height: 1.1rem;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.3rem;
  font-size: 0.26rem;
  box-shadow: 0px 4px 28px 0px rgba(39, 52, 125, 0.05);
  border-radius: 0.16rem;
}
.select_box {
  background: #fff;
  width: 1.96rem;
  margin-left: 0.25rem;
  position: relative;
  height: 0.72rem;
  background: #dfe2ee;
}
.select {
  box-sizing: border-box;
  width: 100%;
  height: 0.7rem;
  display: flex;
  align-items: center;
  padding: 0 0.2rem;
}
.select_text {
  flex: 1;
  width: 1.24rem;
  font-size: 0.26rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select_img {
  width: 0.26rem;
  height: 0.14rem;
  display: block;
  transition: transform 0.3s;
}
.select_img_rotate {
  transform: rotate(180deg);
}
.option_box {
  position: absolute;
  top: 0.7rem;
  width: 100%;
  border: 0.02rem solid #efefef;
  box-sizing: border-box;
  height: 0;
  overflow-y: auto;
  border-top: 0;
  background: #fff;
  transition: height 0.3s;
}
.option {
  display: block;
  line-height: 0.4rem;
  font-size: 0.26rem;
  border-bottom: 0.02rem solid #efefef;
  padding: 0.1rem;
  color: #333333;
}
</style>